<template>
  <!-- 路由视图 -->
  <router-view />
  <!-- 底部导航栏 -->
  <div class="bottom-nav">
    <router-link to="/" class="nav-item">
      <img :src="isActive('/IntelligentDetection') ? IntelligentDetectionActiveIcon : IntelligentDetection" />
    </router-link>
    <router-link to="/Situation" class="nav-item">
      <img :src="isActive('/Situation') ? IconSituationActiveIcon : IconSituation" />
    </router-link>
    <router-link to="/Safety" class="nav-item">
      <img :src="isActive('/Safety') ? IconSafetyActiveIcon : IconSafetyNormal" />
    </router-link>
    <router-link to="/Maintenance" class="nav-item">
      <img :src="isActive('/Maintenance') ? IconMaintenanceNormalActiveIcon : IconMaintenanceNormal" />
    </router-link>
    <router-link to="Control" class="nav-item">
      <img src="./assets/Control.jpg" alt="">
    </router-link>
  </div>

</template>

<script lang="ts" setup>


import autofit from "autofit.js"
import { onMounted, onBeforeUnmount } from "vue"
import { useRoute } from "vue-router";

const route = useRoute(); // 获取当前路由对象
// console.log(route.path)

// 定义图片路径
import IntelligentDetection from './assets/IconIntelligentDetectionNormal.png'
import IntelligentDetectionActiveIcon from './assets/IconIntelligentDetection.png'  // 智能检测
import IconSituation from './assets/IconSituation.png'
import IconSituationActiveIcon from './assets/IconSituation_r.png' // 就业态势
import IconSafetyNormal from './assets/IconSafetyNormal.png'
import IconSafetyActiveIcon from './assets/IconIconSafety.png' // 安防管理
import IconMaintenanceNormal from './assets/IconMaintenanceNormal.png'
import IconMaintenanceNormalActiveIcon from './assets/IconMaintenance.png' // 设备运维

// 判断当前路由是否处于激活状态
const isActive = (path: string) => {
  return route.path === path
}


onMounted(() => {
  autofit.init({
    dh: 729.6,
    dw: 1536,
    el: "#app",
    resize: true
  },
    false
  )
})
// 3. 如果是单个页面做自适应,需要在页面销毁后删除插件,不然可能会影响其他页面,为了保险个人建议App.vue也加上组件销毁的生命周期
onBeforeUnmount(() => {
  autofit.off()
})



</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#app {
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* min-width: 1280px; */
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 40%;
  width: 500px;
  height: 80px;
  /* background: url('./assets/bottom.png'); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background: red; */
}

.nav-item img {
  width: 80px;
  height: 80px;
}
</style>